{% extends 'base.html' %}

{% block content %}
    <h5>{{article.title}}</h5>
    <p>{{article.desc}}</p>
    <div>
      {% csrf_token %}
      <a href="#">{{article.user.username}}</a> <span>发布于:{{article.create_time|date:"Y-m-d H:i"}}</span>
      <span class="lun">评论{{article.comment_count}}</span><span onclick="dianzan('zan')">点赞{{article.up_count}}</span><span  onclick="dianzan('cai')">踩{{article.down_count}}</span>
      <div class="comment">
        <p class='comment_tree'>评论数</p>
        <div class='comment_tree_container' >

        </div>
        <div class="comment_list">
          <ul>
            {% for comment  in comment_list %}
            <li>
              <div>
                <a href="">#{{forloop.counter}}楼</a>&nbsp;&nbsp;<span>{{comment.create_time|date:"Y-m-d H:i:s"}}</span>
                <a href="">{{comment.user.username}}</a>
                <a href="javacript:void(0);" onclick="goFocus('{{comment.user.username}}', '{{comment.pk}}')">回复</a>
              </div>
              {% if comment.parent_comment_id %}
                <div style="text-indent: 3em;">{{comment}} </div> 
              {% else %}
              <div>{{comment}}</div>
              {% endif %}
            </li>
            {% endfor %}
          </ul>
        </div>

        <p> 评论人:{{username}}</p>
        <textarea name="" id="content" cols="30" rows="10">
        </textarea>
        <button class='comment_btn'>提交</button>
      </div>
    </div>
    <hr />
    <script>
      let xhr = new XMLHttpRequest()
      let comment_id = ''
      let content = ''
      let signal = ''
      let tem = document.createElement('div')
      let comment_tree_container = document.getElementsByClassName('comment_tree_container')[0]
      xhr.onreadystatechange = function() {
        if (xhr.status === 200 && xhr.readyState === 4){
          if(JSON.parse(xhr.response).state){
            // 懒省事，直接刷新不想写dom操作了
            // 评论、点赞、踩让页面刷新，但是生产中一定要刷新
            window.location.reload()
          }else{
            // 否则是展开评论数的情况
          let data = JSON.parse(xhr.response)
          
          data.forEach(comment => {
            
            let tem = `<div class='comment_id_${comment.pk}'> <a href="javacript:void(0);" onclick="goFocus('ss', '${comment.pk}')">回复</a>
                  <div>${comment.content}</div>
                </div>
              `
              if(!comment.parent_comment_id) {
                comment_tree_container.innerHTML+= tem
              }else{
                document.getElementsByClassName(`comment_id_${comment.parent_comment_id}`)[0].innerHTML += `<div style="margin-left:10px">${tem}</div>`
                console.log(document.getElementsByClassName(`comment_id_${comment.parent_comment_id}`))

              }
             
          });
          
          }
        }
      }
      function goFocus(username, commid) {
        comment_id = commid
        document.getElementById('content').focus()
        document.getElementById('content').value = `@${username}\n`
      }
      function dianzan(params) {
        let is_up = false
        if(params) {
          is_up = true
        }
        let data = {
          article: '{{article.nid}}',
          is_up: is_up,
          csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value
        }
        let param = []
        for ([key, value] of Object.entries(data)){
          param.push(`${key}=${value}`)
        }
   
        xhr.open('POST', '/digg/', data)
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        xhr.send(param.join('&'))
      }

      let lun = document.getElementsByClassName('comment_btn')[0]
      lun.onclick = function() {
        content = document.getElementById('content').value
        if (comment_id) {
          let index = content.indexOf('\n')
          content = content.slice(index+1)
        }
        
        if(!lun) return
        let data = {
          article: '{{article.nid}}',
          content: content,
          pid: comment_id,
          csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value
        }
        let param = []
        for ([key, value] of Object.entries(data)){
          param.push(`${key}=${value}`)
        }
   
        xhr.open('POST', '/comment/', data)
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        xhr.send(param.join('&'))
        document.getElementById('content').value = ''
        comment_id = ''
      }

      let comment_tree = document.getElementsByClassName('comment_tree')[0]
      comment_tree.onclick = function() {
        let data = {
          article: '{{article.nid}}',
          csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value
        }
        let param = []
        for ([key, value] of Object.entries(data)){
          param.push(`${key}=${value}`)
        }
   
        xhr.open('POST', '/comment_tree/', data)
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        xhr.send(param.join('&'))
      }
    </script>
{% endblock %}

